<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫彩时钟</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="display">
            <div id="time">12:00:00 PM</div>
        </div>
        <span></span>
        <span></span>
    </div>
    <script>
        const time = document.querySelector("#time");
        const time2Tow  = t => t < 10 ? "0" + t : t;
        const dayNight = h => h > 12 ? {day_night : 'PM',hours : h - 12} : {day_night : "AM", hours : h};
        const timeUpdate = (format,dayNight)=>{
            let date = new Date();
            let day_night = "AM";
            let hours = date.getHours();
            let minutes = date.getMinutes();
            let seconds = date.getSeconds();   
            let  d  = dayNight(hours)
            day_night = d.day_night;
            hours = d.hours;
            minutes = format(minutes);
            hours = format(hours);
            seconds = format(seconds);

            time.innerText =  hours + ":" + minutes + ":" + seconds + " "+ day_night;
        };
        timeUpdate(time2Tow,dayNight);

        setInterval(timeUpdate.bind(this,time2Tow,dayNight),1000);

       
    </script>
</body>
</html>